<!-- 主页 -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>焦点学苑</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/vue2.6.14.js"></script>
</head>
<script>
    function changeto (url) {
        window.location.href = url;
    }
</script>

<body>
    <div class="header">
        <div class="head wrap">
            <div class="logo fl"><a href=""><img src="/images/logo.png"></a></div>
            <div class="head-right fr">
                <div class="head-a fr">
                    <div class="head-a1 fl"><a href=""><img src="/images/tb-a.png"></a></div>
                    <div class="head-a1 fl"><a href=""><img src="/images/tb-b.png"></a></div>
                    <span th:unless="${not #strings.isEmpty(session.u?.getUid())}">
                        <div class="head-a3 login-click fl"><a href="#">登录</a></div>
                        <div class="head-a4 fl"><a href="/register.html" target="blank">注册</a></div>
                    </span>
                    <span th:if="${not #strings.isEmpty(session.u?.getUid())}">
                        <div class="head-a4 fl">
                            <select name="" id="" class="head-a3" onchange="changeto($(this).val())">
                                <option value="" checked>我的</option>
                                <option value="/article-add.html"><a href="/blog/user/add.to"> 发表文章</a></option>
                                <option value="/ainArticleList"><a>我的作品</a></option>
                                <option value="/userConcernList"><a>我的收藏</a></option>
                                <option value="/logout"><a>注销</a></option>
                            </select>
                        </div>
                    </span>
                </div>
                <div class="clearfix"></div>
                <div class="nav fr">
                    <ul>
                        <li class="nav-cut"><a href="/">首页</a></li>
                        <li><a href="/blog/user/article.to">文章</a>
                            <!-- <div class="sub-nav">
                                <div class="bich-top"></div>
                                <div class="bich">
                                    <a href="">服饰</a>
                                    <a href="">美食</a>
                                    <a href="">出行</a>
                                    <a href="">约会</a>
                                </div>

                            </div> -->
                        </li>
                        <li><a href="/course/courseList">课程</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">联系我们</a></li>

                    </ul>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>


    <div class="content">
        <div class="idx-banner">
            <div class="fullSlide">
                <div class="box">
                    <ul>
                        <li
                            style="background:url(/upload/ban1.jpg) no-repeat center center;background-size:1000px 600px;">
                            <a href="javascript:;"></a>
                        </li>
                        <li
                            style="background:url(/upload/ban3.jpg) no-repeat center center;background-size:1000px 600px;">
                            <a href="javascript:;"></a>
                        </li>
                        <li
                            style="background:url(/upload/ban2.jpg) no-repeat center center;background-size:1000px 600px;">
                            <a href="javascript:;"></a>
                        </li>
                    </ul>
                </div>
                <div class="hbox">
                    <ul></ul>
                </div>
            </div>
        </div>

        <div class="wrap">
            <div class="cont-box">
                <div class="cont-a fl">
                    <div class="cont-a1"><a href="">新手上路</a><span>|</span><a href="">官方Q群</a><span>|</span><a
                            href="">官方Q群</a></div>
                    <div class="cont-a1"><a href="">新手上路</a><span>|</span><a href="">官方Q群</a><span>|</span><a
                            href="">官方Q群</a></div>
                </div>

                <div class="cont-b fl">
                    <div class="cont-b1">
                        <input type="text" class="cont-text fl" value="">
                        <input type="button" class="cont-btn fl">
                    </div>
                    <div class="cont-b2">热门搜索：分手 女孩 恋爱心理 约会</div>
                </div>

                <div class="cont-c fr">
                    <div class="cont-c1 fl">课程咨询<a href=""><img src="/images/QQ.jpg"></a><a href=""><img
                                src="/images/QQ.jpg"></a></div>
                    <div class="cont-c2 fr"></div>
                </div>
            </div>
        </div>
        <div class="kg-box" id="kg-box"></div>

        <div class="rng-box">
            <div class="kg-title">达人推荐</div>
            <ul class="rng-ul">
                <li>
                    <div class="rng-a"><img src="/upload/rng.jpg"></div>
                    <div class="rng-b"><a href=""><img src="/images/more.jpg"></a></div>
                </li>
                <li>
                    <div class="rng-a"><img src="/upload/rng.jpg"></div>
                    <div class="rng-b"><a href=""><img src="/images/more.jpg"></a></div>
                </li>
                <li>
                    <div class="rng-a"><img src="/upload/rng.jpg"></div>
                    <div class="rng-b"><a href=""><img src="/images/more.jpg"></a></div>
                </li>
                <li>
                    <div class="rng-a"><img src="/upload/rng.jpg"></div>
                    <div class="rng-b"><a href=""><img src="/images/more.jpg"></a></div>
                </li>
                <li>
                    <div class="rng-a"><img src="/upload/rng.jpg"></div>
                    <div class="rng-b"><a href=""><img src="/images/more.jpg"></a></div>
                </li>
            </ul>
        </div>

        <div class="kg-box" id="kg-box2"></div>

        <!--底部-->
        <div class="footer">
            <div class="wrap">
                <div class="foot">
                    <div class="foot-left fl">
                        <a href="">关于我们</a>
                        <a href="">加入我们</a>
                        <a href="contact.html">联系我们</a>
                        <a href="">媒体采访</a>
                    </div>
                    <div class="foot-c fl"><a href=""><img src="images/foot-logo.jpg"></a></div>
                    <div class="foot-right fr">
                        <a href="">同城活动</a>
                        <a href="">课程资讯</a>
                        <a href="">最新发布</a>
                        <a href="">热门文章</a>
                    </div>
                </div>
                <div class="foot-btm">网页制作by云邦</div>
            </div>
        </div>



    </div>

    <!-- <div class="idx-btm"><a href=""><img src="/upload/act-f.jpg"></a></div> -->

    <!--底部-->
    <div class="footer">
        <div class="wrap">
            <div class="foot">
                <div class="foot-left fl">
                    <a href="">关于我们</a>
                    <a href="">加入我们</a>
                    <a href="contact.html">联系我们</a>
                    <a href="">媒体采访</a>
                </div>
                <div class="foot-c fl"><a href=""><img src="/images/foot-logo.jpg"></a></div>
                <div class="foot-right fr">
                    <a href="">同城活动</a>
                    <a href="">课程资讯</a>
                    <a href="">最新发布</a>
                    <a href="">热门文章</a>
                </div>
            </div>
            <div class="foot-btm">网页制作by云邦</div>
        </div>
    </div>


    <div class="mask"></div>
    <div class="login">
        <div class="login-title">
            <div class="login-a">登录</div>
            <div class="login-b"></div>
            <div class="login-c close">x</div>
        </div>
        <div class="login-btm">
            <div class="login-d" style="text-align: center"><span style="color: red" id="nameError"></span>
            </div>
            <div class="login-d"><input id="username" name="username" type="text" class="login-text" placeholder="邮箱/账号"
                    onfocus="$('#nameError').html('')"></div>
            <div class="login-d"><input id="password" name="password" type="password" class="login-pas" placeholder="密码"
                    onfocus="$('#nameError').html('')"></div>
            <div class="login-d"><button type="button" class="login-btn" onclick="userLogin()"> <span
                        style="color:black">登录</span> </button></div>
            <div class="login-f">
                <a href="">忘记密码</a>
                <span>还没有焦点账号?><a href="/register.html" target="blank">点击注册</a></span>
            </div>
        </div>
    </div>

    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/jquery.SuperSlide.2.1.1.js"></script>
    <script src="/js/Action.js"></script>

    <script type="text/javascript">
        $(function () {
            var nav = $(".header"); //得到导航对象
            var win = $(window); //得到窗口对象
            var sc = $(document);//得到document文档对象。
            win.scroll(function () {
                if (sc.scrollTop() >= 580) {
                    nav.addClass("head-cut");
                    $(".head-cut").fadeIn(500);
                } else {
                    nav.removeClass("head-cut");
                    $(".head-cut").fadeOut(500);
                }
            })
        })
    </script>
    <script type="text/javascript">
        $(function ($) {
            $(".fullSlide").slide({
                titCell: ".hbox ul",
                mainCell: ".box ul",
                effect: "fold",
                mouseOverStop: false,
                autoPlay: true,
                autoPage: true,
                trigger: "click",
                startFun: function (i) {
                    var curLi = jQuery(".fullSlide .bd li").eq(i);
                    if (!!curLi.attr("_src")) {
                        curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
                    }
                }
            });

        });
        function pageTo () {
            str = "<div class=\"kg-title\">最新推荐</div>"
            $.getJSON("/blog/user/index", function (date) {
                var aa = 0
                $.each(date.artclesByDate, function (i, item) {
                    if (aa % 3 == 0) {
                        str += "<div class=\"kg\">\n" +
                            "               <a href='/blog/user/comment?aid=" + item.aid + "'><div class=\"kg-a fl\">\n" +
                            "                    <div class=\"kg-a1 fl\"><img src=\"/img/" + item.artimg + "\" style='width:200px;height:180px' ></div>\n" +
                            "                    <div class=\"kg-a2 fl\">\n" +
                            "                         <div class=\"kg-a3\">" + item.title + "</div>\n" +
                            "                         <div class=\"kg-a4\"><a href='/blog/user/articlelist?bloguid=" + item.bloguid + "' class='kg-a4'>" + item.blogusers.uname + "<a></div>\n" +
                            "                         <div class=\"kg-a5\">" + item.createtime + "</div>\n" +
                            "                         <div class=\"kg-a6\">\n" +
                            "                                    <span><img  src=\"/images/col-c1.jpg\"  onclick='selectArticle(" + item.aid + ");$(this).html(parseInt($(this).html())+1)'    >" + item.commentnum + "</span>\n" +
                            "                                    <span><img src=\"/images/col-c2.jpg\"  onclick='coll(this," + item.aid + ")'><span>" + item.collnum + "</span></span>\n" +
                            "                                    <em><img src=\"/images/col-c3.jpg\"></em>\n" +
                            "                                    <em><img src=\"/images/col-c4.jpg\"></em>\n" +
                            "                                    <em><img src=\"/images/col-c5.jpg\"></em>\n" +
                            "                         </div>\n" +
                            "                         <div class=\"kg-t\"><img src=\"/images/kg-t.png\"></div>\n" +
                            "                    </div>\n" +
                            "               </div></a>\n";
                        aa++;
                    }
                    else if (aa % 3 == 1) {
                        str += "             <a href='/blog/user/comment?aid=" + item.aid + "'><div class=\"kg-a fl\">\n" +
                            "                    <div class=\"kg-a1 fl\"><img src=\"/img/" + item.artimg + "\" style='width:200px;height:180px' ></div>\n" +
                            "                    <div class=\"kg-a2 fl\">\n" +
                            "                         <div class=\"kg-a3\">" + item.title + "</div>\n" +
                            "                         <div class=\"kg-a4\"><a href='/blog/user/articlelist?bloguid=" + item.bloguid + "' class='kg-a4'>" + item.blogusers.uname + "<a></div>\n" +
                            "                         <div class=\"kg-a5\">" + item.createtime + "</div>\n" +
                            "                         <div class=\"kg-a6\">\n" +
                            "                                   <span><img src=\"/images/col-c1.jpg\"  onclick='selectArticle(" + item.aid + ")'    >" + item.commentnum + "</span>\n" +
                            "                                    <span><img src=\"/images/col-c2.jpg\"  onclick='coll(this," + item.aid + ")'><span>" + item.collnum + "</span></span>\n" +
                            "                                    <em><img src=\"/images/col-c3.jpg\"></em>\n" +
                            "                                    <em><img src=\"/images/col-c4.jpg\"></em>\n" +
                            "                                    <em><img src=\"/images/col-c5.jpg\"></em>\n" +
                            "                         </div>\n" +
                            "                         <div class=\"kg-t\"><img src=\"/images/kg-t.png\"></div>\n" +
                            "                    </div>\n" +
                            "               </div></a>\n";
                        aa++;
                    }
                    else if (aa % 3 == 2) {
                        str += "               <a href='/blog/user/comment?aid=" + item.aid + "'><div class=\"kg-a fl\">\n" +
                            "                    <div class=\"kg-a1 fl\"><img src=\"/img/" + item.artimg + "\" style='width:200px;height:180px'></div>\n" +
                            "                    <div class=\"kg-a2 fl\">\n" +
                            "                         <div class=\"kg-a3\">" + item.title + "</div>\n" +
                            "                         <div class=\"kg-a4\"><a href='/blog/user/articlelist?bloguid=" + item.bloguid + "' class='kg-a4'>" + item.blogusers.uname + "<a></div>\n" +
                            "                         <div class=\"kg-a5\">" + item.createtime + "</div>\n" +
                            "                         <div class=\"kg-a6\">\n" +
                            "                                   <span><img src=\"/images/col-c1.jpg\"  onclick='selectArticle(" + item.aid + ")'    >" + item.commentnum + "</span>\n" +
                            "                                    <span><img src=\"/images/col-c2.jpg\"  onclick='coll(this," + item.aid + ")'><span>" + item.collnum + "</span></span>\n" +
                            "                                    <em><img src=\"/images/col-c3.jpg\"></em>\n" +
                            "                                    <em><img src=\"/images/col-c4.jpg\"></em>\n" +
                            "                                    <em><img src=\"/images/col-c5.jpg\"></em>\n" +
                            "                         </div>\n" +
                            "                         <div class=\"kg-t\"><img src=\"/images/kg-t.png\"></div>\n" +
                            "                    </div>\n" +
                            "               </div></a>\n" +
                            "\n" + "</div>";
                        aa++;

                    }
                })
                $("#kg-box").html(str)
                $.each(date.blogType, function (i, item2) {
                    var str2 = "<hr style='margin-top: 20px' color=#987cb9 SIZE=3><div  class=\"kg-title\" style='color: chartreuse;' >*****<span style='font-size:15px;color: chartreuse;-webkit-text-stroke: 1px #9bcc76;letter-spacing: 0.04em;color: rebeccapurple' >" + item2.typename + "</span>*******</div>"
                    aa = 0
                    $.each(date[item2.cid], function (i, item) {

                        if (aa % 3 == 0) {
                            str2 += "<div class=\"kg\">\n" +
                                "               <a href='/blog/user/comment?aid=" + item.aid + "'><div class=\"kg-a fl\">\n" +
                                "                    <div class=\"kg-a1 fl\"><img src=\"/img/" + item.artimg + "\" style='width:200px;height:180px'></div>\n" +
                                "                    <div class=\"kg-a2 fl\">\n" +
                                "                         <div class=\"kg-a3\">" + item.title + "</div>\n" +
                                "                         <div class=\"kg-a4\"><a href='/blog/user/articlelist?bloguid=" + item.bloguid + "' class='kg-a4'>" + item.blogusers.uname + "<a></div>\n" +
                                "                         <div class=\"kg-a5\">" + item.createtime + "</div>\n" +
                                "                         <div class=\"kg-a6\">\n" +
                                "                                    <span><img src=\"/images/col-c1.jpg\"  onclick='selectArticle(" + item.aid + ")'    >" + item.commentnum + "</span>\n" +
                                "                                    <span><img src=\"/images/col-c2.jpg\"  onclick='coll(this," + item.aid + ")'><span>" + item.collnum + "</span></span>\n" +
                                "                                    <em><img src=\"/images/col-c3.jpg\"></em>\n" +
                                "                                    <em><img src=\"/images/col-c4.jpg\"></em>\n" +
                                "                                    <em><img src=\"/images/col-c5.jpg\"></em>\n" +
                                "                         </div>\n" +
                                "                         <div class=\"kg-t\"><img src=\"/images/kg-t.png\"></div>\n" +
                                "                    </div>\n" +
                                "               </div></a>\n";
                            aa += 1;
                        }
                        else if (aa % 3 == 1) {

                            str2 += "   <a href='/blog/user/comment?aid=" + item.aid + "'><div class=\"kg-a fl\">\n" +
                                "                    <div class=\"kg-a1 fl\"><img src=\"/img/" + item.artimg + "\" style='width:200px;height:180px'></div>\n" +
                                "                    <div class=\"kg-a2 fl\">\n" +
                                "                         <div class=\"kg-a3\">" + item.title + "</div>\n" +
                                "                         <div class=\"kg-a4\"><a href='/blog/user/articlelist?bloguid=" + item.bloguid + "' class='kg-a4'>" + item.blogusers.uname + "<a></div>\n" +
                                "                         <div class=\"kg-a5\">" + item.createtime + "</div>\n" +
                                "                         <div class=\"kg-a6\">\n" +
                                "                                    <span><img src=\"/images/col-c1.jpg\"    onclick='selectArticle(" + item.aid + ")'    >" + item.commentnum + "</span>\n" +
                                "                                    <span ><img src=\"/images/col-c2.jpg\"   onclick='coll(this," + item.aid + ")'><span>" + item.collnum + "</span></span>\n" +
                                "                                    <em><img src=\"/images/col-c3.jpg\"></em>\n" +
                                "                                    <em><img src=\"/images/col-c4.jpg\"></em>\n" +
                                "                                    <em><img src=\"/images/col-c5.jpg\"></em>\n" +
                                "                         </div>\n" +
                                "                         <div class=\"kg-t\"><img src=\"/images/kg-t.png\"></div>\n" +
                                "                    </div>\n" +
                                "               </div></a>\n";
                            aa++;
                        }
                        else if (aa % 3 == 2) {

                            str2 += " <a href='/blog/user/comment?aid=" + item.aid + "'><div class=\"kg-a fl\">\n" +
                                "                    <div class=\"kg-a1 fl\"><img src=\"/img/" + item.artimg + "\" style='width:200px;height:180px'></div>\n" +
                                "                    <div class=\"kg-a2 fl\">\n" +
                                "                         <div class=\"kg-a3\">" + item.title + "</div>\n" +
                                "                         <div class=\"kg-a4\"><a href='/blog/user/articlelist?bloguid=" + item.bloguid + "' class='kg-a4'>" + item.blogusers.uname + "<a></div>\n" +
                                "                         <div class=\"kg-a5\">" + item.createtime + "</div>\n" +
                                "                         <div class=\"kg-a6\">\n" +
                                "                                    <span><img src=\"/images/col-c1.jpg\"    onclick='selectArticle(" + item.aid + ")'    >" + item.commentnum + "</span>\n" +
                                "                                    <span ><img    src=\"/images/col-c2.jpg\"   onclick='coll(this," + item.aid + ")'  ><span>" + item.collnum + "</span></span>\n" +
                                "                                    <em><img src=\"/images/col-c3.jpg\"></em>\n" +
                                "                                    <em><img src=\"/images/col-c4.jpg\"></em>\n" +
                                "                                    <em><img src=\"/images/col-c5.jpg\"></em>\n" +
                                "                         </div>\n" +
                                "                         <div class=\"kg-t\"><img src=\"/images/kg-t.png\"></div>\n" +
                                "                    </div>\n" +
                                "               </div></a>\n" +
                                "\n" + "</div>";
                            aa++;
                        }
                    })
                    $("#kg-box2").append(str2)

                })


            })
        }

        pageTo()
        function selectArticle (aid) {
            window.location.href = "/blog/user/comment?aid=" + aid;
        }
        function coll (aa, aid) {
            $.getJSON("/blog/user/exits", function (data) {
                if (data) {
                    $.getJSON("/blog/user/collect?aid=" + aid, function (data) {
                        $(aa).attr("onclick", "noColl($(this)," + aid + ")").css("background-color", "red").attr("src", "/images/col-c21.jpg").next().text(parseInt($(aa).next().text().trim()) + 1)
                        alert(data)
                    })
                } else {
                    $(".login-click").click();
                }
            })


        }
        function noColl (aa, aid) {
            $(aa).attr("onclick", "coll($(this)," + aid + ")").attr("src", "/images/col-c2.jpg").next().text(parseInt($(aa).next().text().trim()) - 1)
        }
    </script>

</body>

</html>